<template>
  <div class="radio">
    <div class="content">
      <router-link :to="`/radioPlay/${item.id}`" class="list" v-for="item in radioArr" tag="div" :key="item.id">
        <div class="name">{{item.name}}</div>
        <div class="listenerCount">播放量{{item.listenerCount}}</div>
        <div class="likedCount">点赞{{item.likedCount}}</div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      radioArr: []
    }
  },
  methods: {
    cutString (str) {
      if (str.length > 14) {
        return str.substring(0, 14) + '...'
      }
      return str
    },
    setUrl (url) {
      if (url) {
        return encodeURIComponent(url)
      }
    },
    getData () {
      this.axios({
        params: {
          rid: this.$route.params.id,
          limit: 10
        },
        url: 'dj/program'
      }).then(res => {
        // console.log(res)
        this.radioArr = res.data.programs
        // console.log(this.radioArr)
      })
    }
  },
  created () {
    this.getData()
  }
}
</script>

<style lang="less" scoped>
.radio{
  .content{
    background-color: #fff;
    margin: 0px 20px;
    padding: 20px 45px;
   .list{
     cursor: pointer;
     display: flex;
     margin-top: 30px;
     cursor: pointer;
     .name{
       width: 350px;
     }
     .listenerCount{
       width: 100px;
       margin-left: 200px;
     }
     .likedCount{
       width: 100px;
       margin-left: 300px;
     }
   }
  }
}
</style>
